<script>
import { main } from '@/util/mixins'
import * as service from 'services/x-start/mgr/spread'
import { flatten } from 'array-flatten'

export default {
  mixins: [main],
  data() {
    return {
      service,
      defaultProps: {
        children: 'equipmentList',
      },
    }
  },
  methods: {
    selecet(item, node) {
      if (node.level == 2 && !item.isShow) {
        node.parent.data.isShow = true
      }
      if (node.level == 1 && item.isShow && node.childNodes.length) {
        node.childNodes.forEach((item) => {
          item.data.isShow = false
        })
      }
      item.status = !item.status
    },
    save() {
      let [ids, pids] = [[], []]
      this.tableData.forEach((element) => {
        if (element.isShow) {
          ids.push(element.id)
          element.equipmentList.forEach((item) => {
            if (item.isShow) {
              pids.push(item.id)
            }
          })
        }
      })
      if (ids.length > 4) {
        return this.$message.warning('最多四个')
      }
      if (pids.length > 9) {
        return this.$message.warning('最多九个')
      }
      service.save(ids, pids).then((res) => {
        this.$message.success('保存成功')
      })
    },
  },
}
</script>

<template lang="pug">
Template(
  @sizeChange='handleSizeChange',
  @currentChange='handleCurrentChange',
  ref='child'
)
  span(slot='title') 展示页管理
  .btns(slot='rightBtn')
    el-button.el-icon-plus(
      type='primary',
      plain,
      @click='save()',
      size='small'
    ) 保存
  .list(slot='list') 
    el-tree(
      :data='tableData',
      ref='tree',
      node-key='id',
      default-expand-all,
      :props='defaultProps'
    )
      span.custom-tree-node(slot-scope='{ node, data }')
        span(v-html='data.name')
        input.input(
          type='checkbox',
          v-model='data.isShow',
          @click.stop='selecet(data, node)'
        )
</template>

<style lang="stylus" scoped>
.list
  >>>.el-tree-node__content
    line-height 40px
    height 40px
.custom-tree-node
  display flex
  justify-content space-between
  width 100%
  .input
    line-height 40px
    position relative
    top 9px
    width 15px
    height 15px
</style>